<template>
  <div  class="phonefraud">
    <!-- 头部区域 -->
    <el-header class="slider-bar">
        <el-row>
            <el-col :span="14">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" @click="goback">返回上一级</el-button>
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <div class="grid-content bg-purple">
                                <span class="middle">{{ajbhList.AJMC}} {{$route.query.id}}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <el-row :gutter="20" >
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <el-button type="info" plain>110报警信息</el-button>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" plain>笔录信息</el-button>
                            </div>
                        </el-col> 
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" plain>技术比中</el-button>
                            </div>
                        </el-col>  
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" plain>现堪信息</el-button>
                            </div>
                        </el-col>  
                        <!-- <el-col :span="4">
                            <div class="grid-content bg-purple">
                                <el-button type="info" plain>数据导出</el-button>
                            </div>
                        </el-col>             -->
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <!-- 主体部分 -->
    <el-main>
        <!-- 案件基本信息 -->
      <el-card class="box-card basic">
        <h4 style="margin :0">案件基本信息</h4>
        <el-row :gutter="20" >
          <el-col :span="8">
            <p>案件名称：<span>{{ajbhList.AJMC}}</span></p>
            <p>案件类别：<span>{{ajbhList.AJLB}}</span></p>
            <p>案件状态：<span>{{ajbhList.AJZT}}</span></p> 
            <!-- <p >案发时间:<span>{{list.AFSJ_KS | dateFormat}}</span></p> -->
            <p>案发开始时间：<span>{{ajbhList.AFSJ_KS | dateFormat}}</span></p>
            <p>案发结束时间：<span>{{ajbhList.AFSJ_JS | dateFormat}}</span></p>
            <p>案发地点行政区划：<span class="txt">{{ajbhList.AFDDXZQH}}</span></p>
            <p>案发地址：<span class="txt">{{ajbhList.AFDDXXDZ}}</span></p>
            <p>破案时间：<span>{{ajbhList.JASJ | dateFormat}}</span></p>
            <p>破案单位：<span class="txt">{{ajbhList.PADW}}</span></p>
          </el-col>
          
          <el-col :span="8">
            <p>受理时间：<span>{{ajbhList.SLSJ | dateFormat}}</span></p>
            <p>受理单位：<span class="txt">{{ajbhList.AJSLDW}}</span></p> 
            <p>受理人：<span>{{ajbhList.AJSLR}}</span></p>
            <p>受理意见：<span>{{ajbhList.SAYJ}}</span></p>
            <p>立案时间：<span>{{ajbhList.LASJ | dateFormat}}</span></p>
            <p>立案单位：<span class="txt">{{ajbhList.LADW}}</span></p>
            <p>主办人：<span>{{ajbhList.ZYBAR}}</span></p>
            <p>结案时间：<span>{{ajbhList.JASJ | dateFormat}}</span></p>
            <p>结案单位：<span class="txt">{{ajbhList.JADW}}</span></p>
          </el-col>
          <el-col :span="8">
            <p>警情编号：<span>{{ajbhList.JQBH}}</span></p>
            <p>警情类别：<span>{{ajbhList.JQLB}}</span></p>
            <p>接报警时间：<span>{{ajbhList.JJSJ | dateFormat}}</span></p> 
            <p>接警单位：<span class="txt">{{ajbhList.LADW}}</span></p>
            <p>接警人员：<span class="txt">{{ajbhList.LADW}}</span></p>
            <p>接警状态：<span>{{ajbhList.JJZT}}</span></p>
            <p>财务损失总金额：<span>{{ajbhList.CWSHZJE}}</span></p>
          </el-col>
        </el-row>
        <p class="jydetail">简要案情：{{ajbhList.JYAQ}}</p>
      </el-card >
      <!-- 案件回访 -->
      <!-- <el-card class="box-card">
        <div slot="header" class="clearfix">
            <h4>案件回访信息</h4>
            <p class="ajinfo">
              <span>回访民警</span>
              <i>李某某-某某派出所</i>
              <span>创建时间 </span>
              <i>2018-1-5 15:02:34</i>
              <span> 最后修改时间</span>
              <i>2018-1-5 15:03:50</i>
              <el-button style="float: right; padding: 3px 0" type="text"> 修改回访信息</el-button>
            </p> 
        </div>
        <textarea name="" id="" cols="30" rows="10" placeholder=" 回访内容..."> 
        </textarea>
    </el-card> -->
    <!-- 人工智能NLP分析结果 -->
    <el-card class="box-card result">
        <h4>人工智能NLP分析结果</h4>
        <el-row :gutter="20">
        <el-col :span="8">
            <el-card class="box-card height1">
            <div class="grid-content bg-purple">
                <el-button type="info">受害人</el-button>
                <ul>
                    <li>姓名:<span>{{list.shr_xm}}</span></li>
                    <li>性别:<span>{{list.shr_xb}}</span></li>
                    <li>身份证号:<span>{{list.shr_sfzh}}</span></li>
                    <li>年龄:<span>{{list.shr_nl}}</span></li>
                    <li>职业:<span>{{list.shr_zy}}</span></li>
                    <li>电话:<span>{{list.shr_dh}}</span></li>
                    <li>Q Q 号：<span>{{list.shr_qq}}</span></li>
                    <li>微信号:<span>{{list.shr_wx}}</span></li>
                    <li>支付宝:<span>{{list.shr_zfb}}</span></li>
                    <li>银行卡号:<span class="txt">{{list.shr_yhkh}}</span></li>
                    <li>邮箱号:<span>{{list.shr_yx}}</span></li>
                    <li>居住地:<span>{{list.shr_jzd}}</span></li>
                    <li>居住地类型:<span>{{list.shr_jzdlx}}</span></li>
                </ul>
            </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card height1">
            <div class="grid-content bg-purple">
                <el-button type="info" class="sanum">嫌疑人</el-button>
                <ul>
                    <li>电话:<span>{{list.xyr_dh}}</span></li>                  
                    <li>QQ号:<span>{{list.xyr_qq}}</span></li>
                    <li>支付宝:<span>{{list.xyr_zfb}}</span></li>
                    <li>银行卡号:<span class="txt">{{list.xyr_yhkh}}</span></li>
                    <li>邮箱号:<span>{{list.xyr_yx}}</span></li>
                    <li>网站地址:<span>{{list.xyr_wzdz}}</span></li>
                </ul>
            </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card height1">
            <div class="grid-content bg-purple">
                <el-button type="info" class="sanum">案件分析</el-button>
                <ul>
                    <li>电诈类别:<span>{{list.dzlb}}</span></li>
                    <li>电诈途径:<span>{{list.dztj}}</span></li>
                    <li>冒充身份:<span>{{list.mcsf}}</span></li>
                    <li>转账手段:<span>{{list.zzsd}}</span></li>
                    <li>诈骗金额:<span>{{list.zpje}}</span></li>
                    <!-- <li>报案时间:<span>{{list.basj  | dateFormat }}</span></li> -->
                    <!-- <li>案发地:<span>{{list.afd}}</span></li> -->
                    <!-- <li>案发地类型:<span>{{list.afdlx}}</span></li> -->
                </ul>
            </div>
            </el-card>
        </el-col>
        </el-row>
    </el-card>
    <!-- 案发地址 -->
    <el-card class="box-card adress">
        <h4>案发地址</h4>
        <div>
            <!-- <em>北京市朝阳区**********研究所</em> -->
            <span>{{ajbhList.AFDDXXDZ}}</span>
            <!-- <span>东经</span><i>1****523°</i>
            <span>北纬</span><i>2****223°</i> -->
            <el-button style="float: right; padding: 3px 0" type="text">修改地址</el-button>
        </div>
        <div id="adress" style="height:300px"></div>
    </el-card>
    <!-- 案件串并信息 -->
    <!-- <el-card class="box-card">
        <h4>案件串并信息</h4>
        <div id="vis" style="height:500px"></div>
    </el-card> -->
    <!-- 操作日志 -->
    <el-card class="box-card">
        <h4>操作日志</h4>
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="date"
                label="操作时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="操作人"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作内容">
            </el-table-column>
        </el-table>
    </el-card>
    </el-main>
  </div>
</template>

<script>
import echarts from "echarts";
export default {

  data () {
    return {
        tableData: [],
        // 案件列表信息
        list:'',
        currentPage: 1,
        // 要素列表信息
        ajbhList:'',
        queryData :{
            query:'',
            pageNum:1,
            pageSize:1
        },
        AJBH:'',
    }
  },

  methods: {
    // 返回上一级
    goback(){
        this.$router.go('-1')
    },
    // 人物关系图
    person(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('vis'));
    var graph = {
    "nodes": [{
            "name": "A",
            "value": [
                "教授",
                "在职",
                "党委办公室、校长办公室"
            ],
            "category": "中心教师",
            "symbolSize": 50,
            "tooltip": {
                "formatter": "{b0}:{c0}"
            }
        },
        {
            "name": "B",
            "category": "论文",
            "value": [
                "期刊论文",
                "2005"
            ],
            "symbolSize": 20,
            "tooltip": {
                "formatter": "{b0}:{c0}"
            }
        },
        {
            "name": "C",
            "category": "论文合作教师",
            "symbolSize": 50
        },

        {
            "name": "D",
            "category": "项目",
            "value": [
                "信息与通信工程学院",
                "立项日期：20131101"
            ],
            "symbolSize": 20,
            "tooltip": {
                "formatter": "{b0}:{c0}"
            }
        },
        {
            "name": "N",
            "category": "项目合作教师",
            "symbolSize": 50
        },
         {
            "name": "Q",
            "category": "项目",
            "symbolSize": 20
        },
         
         {
            "name": "S",
            "category": "项目",
            "symbolSize": 20
        },
        {
            "name": "E",
            "category": "专著专利",
            "symbolSize": 20,
            "value": [
                "专利文献",
                "2009-07-21"
            ],
            "tooltip": {
                "formatter": "{b0}:{c0}"
            }
        },
        {
            "name": "W",
            "category": "专著专利",
            "symbolSize": 20
        },
        {
            "name": "Y",
            "category": "专著专利",
            "symbolSize": 20
        },
        {
            "name": "Z",
            "category": "专著专利",
            "symbolSize": 20
        },
        {
            "name": "F",
            "category": "专著专利合作教师",
            "symbolSize": 50
        },
        {
            "name": "O",
            "category": "专著专利合作教师",
            "symbolSize": 50
        },
        {
            "name": "P",
            "category": "专著专利合作教师",
            "symbolSize": 50
        },
        {
            "value": [
                "信息与通信工程学院",
                "信息工程 "
            ],
            "name": "G",
            "category": "课程",
            "symbolSize": 20,
            "tooltip": {
                "formatter": "{b0}:{c0}"
            }
        },
        {
            "name": "I",
            "category": "课程",
            "symbolSize": 20
        },
        {
            "name": "L",
            "category": "课程",
            "symbolSize": 20
        },
        {
            "name": "H",
            "category": "课程合作教师",
            "symbolSize": 50
        },
         {
            "name": "M",
            "category": "课程合作教师",
            "symbolSize": 50
        }
             
         
    ],
    "links": [{
            "source": "A",
            "target": "B"
        },
        {
            "source": "B",
            "target": "C"
        },
        {
            "source": "A",
            "target": "D"
        },
         {
            "source": "D",
            "target": "N"
        },
        {
            "source": "N",
            "target": "Q"
        },
        {
            "source": "N",
            "target": "R"
        },
        {
            "source": "A",
            "target": "E"
        },
        {
            "source": "E",
            "target": "F"
        },
        {
            "source": "F",
            "target": "W"
        },
        {
            "source": "F",
            "target": "Y"
        },
        {
            "source": "P",
            "target": "Z"
        },
        {
            "source": "E",
            "target": "O"
        },
         {
            "source": "E",
            "target": "P"
        },
        {
            "source": "A",
            "target": "G"
        },
        {
            "source": "G",
            "target": "H"
        },
         {
            "source": "G",
            "target": "M"
        },
        {
            "source": "M",
            "target": "I"
        },
        {
            "source": "M",
            "target": "L"
        }]
    };
    const defaultCategory = "中心教师";
    const graphTitle = "";
    const currentGraph = {
            nodes: {},
            links: {},
        };
        const nodeMap = {};
        // 页面加载时，第一次初始化图
        function init() {
            // 根据定义的常量，产生currentGraph的默认数据
            // 遍历全部nodes和links，产生node映射map
            for (let i = 0; i < graph.nodes.length; i++) {
                if (graph.nodes[i].category === defaultCategory) {
                    currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
                }
                nodeMap[graph.nodes[i].name] = graph.nodes[i];
                nodeMap[graph.nodes[i].name]['links'] = {};
                nodeMap[graph.nodes[i].name]['nodes'] = {};
                nodeMap[graph.nodes[i].name]['hasAppend'] = false;
            }
            for (let i = 0; i < graph.links.length; i++) {
                let link = graph.links[i];
                if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
                    nodeMap[link.source].links[link.target] = link;
                    nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
                }
            }
        
            for (let i = 0; i < graph.nodes.length; i++) {
                graph.nodes[i].itemStyle = null;
                graph.nodes[i].label = {
                    normal: {
                        show: graph.nodes[i].symbolSize > 15
                    }
                };
            }
            redrawGraph();
        }
        // 处理点击节点展开
        function append(nodeName) {
            // 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
            let node = nodeMap[nodeName];
            if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
                alert("无法继续展开");
                return
            }
            Object.values(node.nodes).forEach(n => {
                currentGraph.nodes[n.name] = n;
            });
            Object.values(node.links).forEach(l => {
                currentGraph.links[l.source + "_" + l.target] = l;
            });
            node.hasAppend = true;
            redrawGraph();
        }
        // 处理点击节点收缩
        function remove(nodeName) {
            //根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
            let node = nodeMap[nodeName];
            Object.values(node.nodes).forEach(n => {
                delete currentGraph.nodes[n.name];
                if (n.hasAppend === true && Object.keys(n.nodes).length > 0) {
                    remove(n.name);
                }
            });
            Object.values(node.links).forEach(l => {
                delete currentGraph.links[l.source + '_' + l.target];
            });
            // 设置flag 等于false
            node.hasAppend = false;

            redrawGraph();
        }
            // 根据更新后的option重新画图
            function redrawGraph() {
                option.series[0].data = Object.values(currentGraph.nodes);
                option.series[0].links = Object.values(currentGraph.links);
                console.log(option);
                myChart.setOption(option);
            }
    const option = {
        title: {
            text: graphTitle,
            top: 'top',
            left: 'center',
        },
        tooltip: {},
        legend: [],
        animation: false,
        series: [{
            type: 'graph',
            layout: 'force',
            data: Object.values(currentGraph.nodes),
            links: Object.values(currentGraph.links),
            categories: [{
                    name: '中心教师',
                    itemStyle: {
                        color: '#c23531'
                    },

                },
                {
                    name: '专著专利合作教师',
                    itemStyle: {
                        color: '#749f83'
                    },


                },
                {
                    name: '课程合作教师',
                    itemStyle: {
                        color: '#6e7074'
                    },

                },
                {
                    name: '论文合作教师',
                    itemStyle: {
                        color: '#2f4554'
                    },

                },
                {
                    name: '论文',
                    itemStyle: {
                        color: '#61a0a8'
                    },

                },
                {
                    name: '专著专利',
                    itemStyle: {
                        color: '#91c7ae'
                    },

                },
                {
                    name: '课程',
                    itemStyle: {
                        color: '#999ea4'
                    },


                },
                {
                    name: '项目合作教师',
                    itemStyle: {
                        color: '#DEB887'
                    },

                },
                {
                    name: '项目',
                    itemStyle: {
                        color: '#bda29a'
                    },

                }
            ],
            roam: true,
            focusNodeAdjacency: false,
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 1,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            },
            label: {
                position: 'right',
                formatter: '{b}'
            },
            lineStyle: {
                color: 'target',
                opacity: 0.6,
                curveness: 0.3
            },
            emphasis: {
                lineStyle: {
                    width: 10
                }
            },
            force: {
                layoutAnimation: false,
                repulsion: 500
            }
        }]
            };
            init();
            myChart.on('click', function(params) {
                if (params.dataType === "node") {
                    const node = nodeMap[params.data.name];
                    if (node.hasAppend === true) {
                        remove(node.name)
                    } else {
                        append(node.name);
                    }
                }
            });
    },
    // 查询案件档案 案件要素
    async getlist(){
      // ?pageNum=`+ this.pageNum +`&pageSize=`+ this.pageSize)
      // const res = await this.axios.get('/ynzc/xtbaAjxx/getAjdaList?pageNum=1&pageSize=10')
      const res = await this.axios.get('/ynzc/xtbaAjxx/getAjys?ajbh='+ this.$route.query.id)
      console.log(this.$route.query.id); 
      console.log(res);
      if (res.data.status == 200) {
        this.total = res.data.results.total;
        this.list = res.data.results.data[0]
        // console.log(this.list);
        
      }
    },
    // 查询案件要素
    async getajbh(){
      const res = await this.axios.get('/ynzc/xtbaAjxx/getAjdaList?AJBH='+ this.$route.query.id)
      console.log(this.$route.query.id); 
      console.log(res);
      if (res.data.status == 200) {
        // this.total = res.data.results.total
        this.ajbhList = res.data.results.data[0]
        
      }
    },
    // 使头部滑动到顶部固定
    sliderbar(){
        //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var sliderbarTop =sliderbar.offsetTop
        // 2. 页面滚动事件 scroll
         document.addEventListener('scroll', function() {
            // 3 .当我们页面被卷去的头部大于等于了 50 此时 顶部栏就要改为固定定位
            if ( sliderbarTop >= 50) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'reletive';
                sliderbar.style.top = '50px';
            }
         })
    }
 },

  created () {
    this.getlist()
    this.getajbh()
 },
  mounted () {
    this.person()
    this.sliderbar()
   
    
 }
}
</script>

<style lang='less' scoped>
.phonefraud {
    font-size: 14px;
}
.el-row {
    margin-bottom: 20px;
     &:last-child {
      margin-bottom: 0;
     }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
   .el-header {
    margin-bottom: 10px;
  }
  .height{
      height: 330px;
  }
  .middle{
      line-height: 40px;
      font-weight: 700;
      font-size: 18px;
  }
  .middle1{
    margin-top: 30px;
  }
  .ajinfo span{
    margin-right: 5px;
  }
  .ajinfo i {
      font-style: normal;
      margin-right: 20px;
  }
  textarea{
      width: 100%;
  }
  .result ul  {
     margin: 0;
     padding: 0;
  }
  .result li {
      margin: 20px 0;
  }
  .result li span {
      color: red;
      margin-left: 7px;
  }
  .height1 {
      height: 365px;
  }
  .adress em{
      margin-right: 50px;
  }
  .adress span {
      margin-right: 10px;
  }
  .adress i {
      margin-right: 15px;
      color: red;
  }
  .basic p span {
      color:red;
  }
  .jydetail {
      margin: 0;
      margin-left: 5px;
  }
  .slider-bar {
      position: relative;
      top: 0;
      left: 0;
  }
</style>
